<template>
  <div>Home:{{ $store.state.counter }}</div>
  <h2> {{ doublecounter }}</h2>
  <h2> {{ totalage }}</h2>
  <h2> {{ message }}</h2>
  <h2> {{ $store.getters.getFriendId(101) }}</h2>
  <h2> {{ $store.getters.getFriendId(102) }}</h2>
  <h2> {{ $store.state.name }}</h2>
  <button @click="changename">change</button>
  <h2>action:{{ $store.state.counter }}</h2>
  <button @click="counterbtn">修改counter</button>
  <h2>action:{{ $store.state.name }}</h2>
  <button @click="namebtn">修改name</button>
</template>

<script>
import { mapGetters } from 'vuex';
import { mapActions } from 'vuex';

  export default {
    computed: {
      ...mapGetters(["doublecounter","totalage","message"])
    },
    methods: {
      changename() {
         this.$store.commit("changename")  
      },
      counterbtn() {
        this.$store.dispatch("incrementAction")
      },
      // ...mapActions(["incrementAction","changenameAction"])
    }
  }
</script>

<style scoped>
</style>